<!-- 活动信息收集 + 打印机管理 -->
<template>
  <div class="">
    <a-card
      style="width: 100%; margin-top: 20px"
      :tab-list="tabList"
      :active-tab-key="titleKey"
      @tabChange="key => onTabChange(key)"
    >
      <!-- <div v-show="titleKey === 'form'">
        <ActivityForm :activityInfo="activityInfo" @changeTitleKey="(key) => (titleKey = key)" />
      </div> -->
      <div v-show="titleKey === 'sign'">
        <SignManage :activityInfo="activityInfo" :titleKey="titleKey" />
      </div>
      <div v-show="titleKey === 'material'">
        <MaterialManage :activityInfo="activityInfo" :titleKey="titleKey" />
      </div>
    </a-card>
  </div>
</template>

<script>
import ActivityForm from '../components/activityForm/index.vue'
import SignManage from '../components/signManage/index.vue'
import MaterialManage from '../components/MaterialManage/index.vue'
import { getActivityInfo } from '@/api/activity/activity'

export default {
  name: 'ActivityConfig',
  components: {
    ActivityForm,
    SignManage,
    MaterialManage
  },
  data() {
    return {
      tabList: [
        // {
        //   key: 'form',
        //   tab: '活动信息收集'
        // },
        {
          key: 'sign',
          tab: '打印机管理'
        },
        {
          key: 'material',
          tab: '台卡物料管理'
        }
      ],
      titleKey: 'sign',
      activityInfo: undefined
    }
  },
  computed: {},
  methods: {
    getInfo(id) {
      getActivityInfo(id).then(res => {
        this.activityInfo = res.data
      })
    },
    onTabChange(key) {
      this.titleKey = key
    }
  },
  activated() {
    let { key, activityId } = this.$route.query
    this.titleKey = key || 'sign'
    this.getInfo(activityId)
  }
}
</script>
<style scoped></style>
